<template>
  <van-overlay :show="show" @click="onClose">
    <div class="wrapper flex_center flex_c">
      <div class="block" @click.stop>
        <p v-for="(item, idx) in list" :class="[item.id === dedicated_to && 'active']" @click="onChoose(item)">{{ item.title }}</p>
      </div>
      <img @click="onClose" src="../assets/img/music/close_icon.png" alt="" class="close">
    </div>
  </van-overlay>
</template>
<script setup>
import { getSendRolesList } from '@/api'
import { ref, watch } from 'vue'
let props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  dedicated_to: {
    type: [String, Number],
    default: ''
  },
  dedicated_to_name: {
    type: String,
    default: ''
  },
})
let emits = defineEmits(['update:show', 'update:dedicated_to'])
let list = ref([])
let onClose = () => {
  emits('update:show', false)
}
let fnGet = async () => {
  const { code, data } = await getSendRolesList()
  if (code === 200) {
    list.value = data
  }
}
let onChoose = item => {
  if (props.dedicated_to === item.id) {
    emits('update:dedicated_to', '')
    emits('update:dedicated_to_name', '')
    return false
  }
  emits('update:dedicated_to', item.id)
  emits('update:dedicated_to_name', item.title)
  emits('update:show', false)
}
watch(() => props.show, async (n) => {
  console.log(n, 'givewatch')
  if (n && !list.value.length) {
    fnGet()
  }
})
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
}

.block {
  width: 280px;
  background: #161616;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255,255,255, 1);
  padding: 16px 0;
  text-align: center;
  line-height: 48px;
  .active {
    background: #0C0C0C;
  }
 
}
.close {
  width: 36px;
  height: 36px;
  display: block;
  margin-top: 24px;
}
</style>